<template>
  <div class="bg" v-if="showLoading">
    <div class="loading">
      <div class="loading2"></div>
    </div> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      showLoading: false
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes move {
  0%{
    transform: rotate(0deg);
  }
  100%{
     transform: rotate(360deg);
  }
}
.bg{
  position: fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background:rgba(0,0,0,.6);
  z-index:10;
  display:flex;
  justify-content: center;
  align-items: center;
}
.loading{
  width: 50px;
  height: 50px;
  border:10px solid rgba(252, 77, 8, 0.842);
  border-left-color:transparent;
  border-radius: 35px;
  animation:move .5s linear infinite;
  display:flex;
  justify-content: center;
  align-items: center;
  .loading2{
    width: 20px;
    height: 20px;
    border:6px solid rgba(204, 231, 49, 0.842);
    border-left-color:transparent;
    border-radius: 16px;
    animation:move 1s linear infinite reverse;
  }
}
</style>
